{##}
{##}
{#{% load static %}#}
{#<!DOCTYPE html>#}
{#<html lang="en">#}
{##}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>Document</title>#}
{##}
{# <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css' %}">#}
{#<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">#}
{#    <style>#}
{#        .navbar {#}
{#            border-radius: 0;#}
{#        }#}
{#    </style>#}
{#{% block css %}#}
{#{% endblock %}#}
{#</head>#}
{##}
{#<body>#}
{##}
{##}
{#    <!-- 导航条, https://v3.bootcss.com/components/#navbar -->#}
{#    <nav class="navbar navbar-default">#}
{#        <div class="container">#}
{#            <!-- Brand and toggle get grouped for better mobile display -->#}
{#            <div class="navbar-header">#}
{#                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"#}
{#                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">#}
{#                    <span class="sr-only">Toggle navigation</span>#}
{#                    <span class="icon-bar"></span>#}
{#                    <span class="icon-bar"></span>#}
{#                    <span class="icon-bar"></span>#}
{#                </button>#}
{#                <a class="navbar-brand" href="#">员工管理系统</a>#}
{#            </div>#}
{##}
{#            <!-- Collect the nav links, forms, and other content for toggling -->#}
{#            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">#}
{#                <ul class="nav navbar-nav">#}
{#                    <li><a href="/depart/list/">部门管理</a></li>#}
{#                    <li><a href="/user/list/">用户管理</a></li>#}
{#                      <li><a href="/num/list/">靓号管理</a></li>#}
{#                    <li><a href="/admin/list/">管理员</a></li>#}
{#                    <li><a href="/task/list/">任务管理</a></li>#}
{##}
{##}
{##}
{#                </ul>#}
{#                <ul class="nav navbar-nav navbar-right">#}
{#                    <li><a href="#">注册</a></li>#}
{#                    <li class="dropdown">#}
{#                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"#}
{#                            aria-expanded="false">{{ request.session.info.username}}<span class="caret"></span></a>#}
{#                        <ul class="dropdown-menu">#}
{#                            <li><a href="#">Action</a></li>#}
{#                            <li><a href="#">Another action</a></li>#}
{#                            <li><a href="#">Something else here</a></li>#}
{#                            <li role="separator" class="divider"></li>#}
{#                            <li><a href="#">Separated link</a></li>#}
{#                            <li><a href="/logout">注销</a></li>#}
{#                        </ul>#}
{#                    </li>#}
{#                </ul>#}
{#            </div><!-- /.navbar-collapse -->#}
{#        </div><!-- /.container-fluid -->#}
{#    </nav>#}
{#    <!-- 新建区域 -->#}
{#   <div class="container">#}
{##}
{#    <div class="panel panel-default">#}
{#        <div class="panel-heading">表单</div>#}
{#        <div class="panel-body">#}
{#            <form method="post" id="task_form" novalidate>#}
{#                <div>#}
{#                    {% for item in form %}#}
{#                    <div class="col-xs-6">#}
{#                        <div class="form-group">#}
{#                            <label>{{ item.label }}</label>#}
{#                            {{ item }}#}
{#                        </div>#}
{#                    </div>#}
{#                    {% endfor %}#}
{#                </div>#}
{#            </form>#}
{#            <div class="col-xs-12">#}
{#                <input id="submit" type="submit" value="提 交" class="btn btn-primary center-block" style="width: 100px;">#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{##}
{#    <h1>任务管理</h1>#}
{#    <h3>示例1</h3>#}
{#    <input id="btn1" type="button" value="点击1" class="btn btn-primary">#}
{##}
{#    <h3>示例2</h3>#}
{#    <input type="text" id="txtuser" placeholder="姓名">#}
{#    <input type="text" id="txtpwd" placeholder="密码">#}
{#    <input id="btn2" type="button" value="点击2" class="btn btn-primary">#}
{##}
{#    <form id="from3">#}
{#        <h3>示例2</h3>#}
{#        <input type="text" name="user" placeholder="姓名">#}
{#        <input type="text" name="age" placeholder="年龄">#}
{#        <input type="text" name="pwd" placeholder="密码">#}
{#        <input type="text" name="mobile" placeholder="电话">#}
{#    </form>#}
{#    <input id="btn3" type="button" value="点击3" class="btn btn-primary">#}
{##}
{##}
{##}
{#</div>#}
{##}
{#<script type="text/javascript">#}
{##}
{#    $(function () {#}
{#        // 页面框架加载完成之后代码自动执行#}
{#        bindBtn1Event();#}
{#        bindBtn2Event();#}
{#        bindBtn3Event();#}
{#        bindaddEvent();#}
{#    })#}
{##}
{##}
{#    function bindBtn1Event() {#}
{#        $("#btn1").click(function () {#}
{#            $.ajax({#}
{#                url: '/task/ajax/',#}
{#                type: "post",#}
{#                data: {#}
{#                    n1: 123,#}
{#                    n2: 456#}
{#                },#}
{#                dataType: "JSON",#}
{#                success: function (res) {#}
{#                    console.log(res);#}
{#                    console.log(res.status);#}
{#                    console.log(res.data);#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{##}
{#    function bindBtn2Event() {#}
{#        $("#btn2").click(function () {#}
{#            $.ajax({#}
{#                url: '/task/ajax/',#}
{#                type: "post",#}
{#                data: {#}
{#                    name: $("#txtuser").val(),#}
{#                    password: $("#txtpwd").val()#}
{#                },#}
{#                dataType: "JSON",#}
{#                success: function (res) {#}
{#                    console.log(res);#}
{#                    console.log(res.status);#}
{#                    console.log(res.data);#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{##}
{#    function bindBtn3Event() {#}
{#        $("#btn3").click(function () {#}
{#            $.ajax({#}
{#                url: '/task/ajax/',#}
{#                type: "post",#}
{#                data: $("#from3").serialize(),#}
{#                dataType: "JSON",#}
{#                success: function (res) {#}
{#                    console.log(res);#}
{#                    console.log(res.status);#}
{#                    console.log(res.data);#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{##}
{#    function bindaddEvent() {#}
{#        $("#submit").click(function () {#}
{#            $.ajax({#}
{#                url: '/task/add/',#}
{#                type: "post",#}
{#                data: $("#task_form").serialize(),#}
{#                dataType: "JSON",#}
{#                success: function (res) {#}
{#                    console.log(res);#}
{#                    console.log(res.status);#}
{#                    console.log(res.data);#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{#</script>#}
{##}
{# <script src="{% static "js/jquery-3.7.1.js" %}"></script>#}
{#    <script src="{% static 'plugins/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script></body>#}
{#</html>#}
{##}
{##}
{##}
{##}
{##}
{##}


{% extends 'layout.html' %}
{% load static %}

{% block content %}
<div class="container">

    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">
            <form method="post" id="task_form" novalidate>
                <div>
                    {% for item in form %}
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>{{ item.label }}</label>
                            {{ item }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </form>
            <div class="col-xs-12">
                <input id="submit" type="submit" value="提 交" class="btn btn-primary center-block" style="width: 100px;">
            </div>
        </div>
    </div>

    <h1>任务管理</h1>
    <div>
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 5px;"></span>
            <span>任务列表</span>
        </div>

        <!-- Table -->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>级别</th>
                    <th>负责人</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for obj in queryset %}
                <tr>
                    <th>{{ obj.id }}</th>
                    <td>{{ obj.title }}</td>
                    <td>{{ obj.get_level_display }}</td>
                    <td>{{ obj.user.username }}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" href="#">编辑</a>
                        <a class="btn btn-danger btn-xs" href="#">删除</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<ul class="pagination">
    {{ page_string }}
</ul>
<br>

<form method="get">
    <div style="display:inline-block; width: 150px;">
        <div class="input-group">
            <span> <input type="text" class="form-control" placeholder="请输入页码" name="page"></span>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">跳转</button>
            </span>
        </div>
    </div>
</form>


</div>

{% endblock %}


{% block script %}
 <script src="{% static "js/jquery-3.7.1.js" %}"></script>
<script type="text/javascript">

    $(function () {
        // 页面框架加载完成之后代码自动执行
        bindBtn1Event();
        bindBtn2Event();
        bindBtn3Event();
        bindaddEvent();
    })


    function bindBtn1Event() {
        $("#btn1").click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: "post",
                data: {
                    n1: 123,
                    n2: 456
                },
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }

    function bindBtn2Event() {
        $("#btn2").click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: "post",
                data: {
                    name: $("#txtuser").val(),
                    password: $("#txtpwd").val()
                },
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }

    function bindBtn3Event() {
        $("#btn3").click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: "post",
                data: $("#from3").serialize(),
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }

    function bindaddEvent() {
        $("#submit").click(function () {
            $.ajax({
                url: '/task/add/',
                type: "post",
                data: $("#task_form").serialize(),
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }
</script>
{% endblock %}
